<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/index.css">
    <title>16-导航系列</title>
</head>

<body>
    <div class="cont">
        <!-- 第一个导航 -->
        <div class="nav_a">
            <input type="checkbox" name="chk" id="chk1">
            <label for="chk1">
                <div class="plus">
                    <img src="./images/plus.png" alt="">
                </div>
            </label>
            <div class="location">
                <img src="./images/location.png" alt="">
            </div>
            <div class="message">
                <img src="./images/message.png" alt="">
            </div>
            <div class="phone">
                <img src="./images/phone.png" alt="">
            </div>
            <div class="share">
                <img src="./images/share.png" alt="">
            </div>
        </div>
        <!-- 第二个导航 -->
        <div class="nav_b">
            <input type="checkbox" name="chk2" id="chk2">
            <label for="chk2">
                <div class="plus">
                    <img src="./images/plus.png" alt="">
                </div>
            </label>
            <div class="location">
                <img src="./images/location.png" alt="">
            </div>
            <div class="message">
                <img src="./images/message.png" alt="">
            </div>
            <div class="phone">
                <img src="./images/phone.png" alt="">
            </div>
            <div class="share">
                <img src="./images/share.png" alt="">
            </div>
            <div class="location2">
                <img src="./images/location.png" alt="">
            </div>
            <div class="message2">
                <img src="./images/message.png" alt="">
            </div>
        </div>

        <!-- 第三个导航 -->
        <div class="nav_c">
            <input type="checkbox" name="chk3" id="chk3">
            <label for="chk3">
                <div class="plus">
                    <img src="./images/plus.png" alt="">
                </div>
            </label>
            <div class="location3 icon">
                <img src="./images/location.png" alt="">
            </div>
            <div class="message5 icon">
                <img src="./images/message.png" alt="">
            </div>
            <div class="phone icon">
                <img src="./images/phone.png" alt="">
            </div>
            <div class="share5 icon">
                <img src="./images/share.png" alt="">
            </div>
            <div class="phone2 icon">
                <img src="./images/phone.png" alt="">
            </div>
            <div class="message3 icon">
                <img src="./images/message.png" alt="">
            </div>
        </div>
        <!-- 第四个导航 -->
        <div class="nav_d">
            <input type="checkbox" name="chk4" id="chk4">
            <label for="chk4">
                <div class="plus">
                    <img src="./images/plus.png" alt="">
                </div>
            </label>
            <div class="location">
                <img src="./images/location.png" alt="">
            </div>
            <div class="message">
                <img src="./images/message.png" alt="">
            </div>
            <div class="phone">
                <img src="./images/phone.png" alt="">
            </div>
            <div class="share">
                <img src="./images/share.png" alt="">
            </div>
        </div>
  <!-- 第五个导航 -->
  <div class="nav_e">
    <input type="checkbox" name="chk5" id="chk5">
    <label for="chk5">
        <div class="plus">
            <img src="./images/plus.png" alt="">
        </div>
    </label>
    <div class="location">
        <img src="./images/location.png" alt="">
    </div>
    <div class="message">
        <img src="./images/message.png" alt="">
    </div>
    <div class="phone">
        <img src="./images/phone.png" alt="">
    </div>
    <div class="share">
        <img src="./images/share.png" alt="">
    </div>
</div>

<!-- 第六个导航 -->
<div class="nav_f">
    <input type="checkbox" name="chk6" id="chk6">
    <label for="chk6">
        <div class="plus">
            <img src="./images/plus.png" alt="">
        </div>
    </label>
    <div class="location">
        <img src="./images/location.png" alt="">
    </div>
    <div class="message">
        <img src="./images/message.png" alt="">
    </div>
    <div class="phone">
        <img src="./images/phone.png" alt="">
    </div>
    <div class="share">
        <img src="./images/share.png" alt="">
    </div>
</div>


    </div>
</body>

</html>